<template>
  <div v-bind:class="['card',da.cls]">
     <img :src="da.icon" alt="">
     <p class="count">{{da.count}}</p>
     <p class="tit">{{da.tit}}</p>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: ['da']
  
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
    .card{
        color: #fff;
        width: 2.8rem;
        height:1.8rem;
        border-radius: .1rem;
        background-color: #fff;
        margin: .3rem auto;
        margin-left: .6rem;
        padding:  .2rem;
    }
    img{
        width: .57rem;
        height: .57rem;
    }
    .count{
        font-size: .5rem;
        text-align: center;
        font-weight: bold;
        font-family: Haettenschweiler, sans-serif;
    }
    .tit{
        font-size: .24rem;
        text-align: center;
    }
    .bg-blue{
        background: linear-gradient(-45deg,#5888F7,#BAFCFF);
    }
    .bg-yellow{
        background: linear-gradient(-45deg,#5ECAF7,#57FAA4);
    }
    .bg-green{
        background: linear-gradient(-45deg,#B98C3F,#E9C98C);
    }
</style>
